<!-- 给排水 》 给水系统 -->

<template>
  <canvas id="waterSupplyCanvas" />
</template>

<script>
// ============================== 导入依赖 ============================== //

import { Engine, Scene, ArcRotateCamera, Vector3, Color3, SceneLoader, MeshBuilder, StandardMaterial } from '@babylonjs/core'
import '@babylonjs/loaders'
import { meshBindAction } from '@/plugin/babylon/methods.js'

// ============================== 导出组件 ============================== //

export default {
  /**
   * 名称定义 (实际使用名称)
   */
  name: 'WaterSupply',

  data() {
    return {
      engine: null,
      scene: null,
    }
  },

  methods: {
    createScene(engine) {
      const scene = new Scene(engine)

      scene.createDefaultLight()

      const skyBox = MeshBuilder.CreateBox('skyBox', { size: 1000 }, scene)
      const skyBoxMaterial = new StandardMaterial('skyMaterial', scene)
      skyBoxMaterial.backFaceCulling = false
      skyBoxMaterial.emissiveColor = new Color3(1, 1, 1)
      skyBox.material = skyBoxMaterial

      const arcRotateCamera = new ArcRotateCamera('arc-rotate-camera', -7.84, 1.068, 10, new Vector3(0.37, 2.11, -0.05), scene)
      arcRotateCamera.upperBetaLimit = Math.PI / 2
      arcRotateCamera.allowUpsideDown = false
      arcRotateCamera.lowerRadiusLimit = 5
      arcRotateCamera.upperRadiusLimit = 40
      arcRotateCamera.attachControl(engine.getRenderingCanvas(), true)

      SceneLoader.Append('//192.168.139.84:8092/glb/', 'feed-water-2.glb', scene, () => {
        window.console.log('给水模型加载成功!')

        const waterBox1Mesh = scene.getMeshByName('shuixiang.001')
        const p1Mesh = scene.getMeshByName('beng.001')
        const p2Mesh = scene.getMeshByName('beng.002')
        const p3Mesh = scene.getMeshByName('beng.003')
        const p4Mesh = scene.getMeshByName('beng.004')
        const p5Mesh = scene.getMeshByName('beng.005')
        const p6Mesh = scene.getMeshByName('beng.006')
        const p7Mesh = scene.getMeshByName('beng.007')

        let uOffset = 0
        const pipelineTextures = scene.textures.filter((t) => t.name.indexOf('pipeline.') === 0)
        setInterval(() => {
          uOffset += 0.5
          pipelineTextures.forEach((t) => {
            t.uOffset = uOffset
          })
        }, 300)

        setInterval(() => {
          p6Mesh.renderOverlay = !p6Mesh.renderOverlay
        }, 1000)

        meshBindAction(scene, waterBox1Mesh, () => { window.top.postMessage('waterTankDetailsDialogIsShow', '*') })
        meshBindAction(scene, p1Mesh, () => { window.top.postMessage('pumpDetailsDialogIsShow', '*') })
        meshBindAction(scene, p2Mesh, () => { window.top.postMessage('pumpDetailsDialogIsShow', '*') })
        meshBindAction(scene, p3Mesh, () => { window.top.postMessage('pumpDetailsDialogIsShow', '*') })
        meshBindAction(scene, p4Mesh, () => { window.top.postMessage('pumpDetailsDialogIsShow', '*') })
        meshBindAction(scene, p5Mesh, () => { window.top.postMessage('pumpDetailsDialogIsShow', '*') })
        meshBindAction(scene, p6Mesh, () => { window.top.postMessage('pumpDetailsDialogIsShow', '*') })
        meshBindAction(scene, p7Mesh, () => { window.top.postMessage('pumpDetailsDialogIsShow', '*') })
      })

      return scene
    },

    resize() {
      this.engine.resize()
    },
  },

  mounted() {
    this.engine = new Engine(document.getElementById('waterSupplyCanvas'), true)
    this.scene = this.createScene(this.engine)
    this.engine.runRenderLoop(() => { this.scene.render() })

    window.console.log('加载给水模型!')
    window.addEventListener('resize', this.resize)
  },

  destroyed() {
    window.removeEventListener('resize', this.resize)
  },
}
</script>
